import { Select } from 'antd';
import { getChennelsAPI } from 'api/chennel';
import React, { useEffect, useState } from 'react';

const { Option } = Select;

// 把value和onChange，托管给Form组件，Form源码内部会自动接管value和onChange
// 也可以使用透穿---原封不动的传props
export default function Channel(props) {
  const [chennelList, setChennelList] = useState([]);
  const getChennelArr = async () => {
    const res = await getChennelsAPI();
    // console.log(res);
    setChennelList(res.data.channels);
  };
  useEffect(() => {
    getChennelArr();
  }, []);
  return (
    <Select {...props}>
      {chennelList.map((item) => {
        return (
          <Option key={item.id} value={item.id}>
            {item.name}
          </Option>
        );
      })}
    </Select>
  );
}
